<!--  -->
<template>
  <div>
    <el-input v-model="sms.value" placeholder="请输入你的验证码">
      <template #append>
        <el-button
          :disabled="sms.flag"
          native-type="button"
          :loading="sms.loading"
          @click="sms.getSms"
        >
          {{ sms.flag ? `${sms.time}s` : "获取验证码" }}
        </el-button>
      </template>
    </el-input>
  </div>
</template>

<script setup>
import { reactive, defineProps } from "vue"
import { ElMessage } from "element-plus"
const props = defineProps({
    getSms: {
        type: Promise,
        default: () => {},
    },
})
const sms = reactive({
    value: "",
    flag: false,
    time: "",
    loading: false,
    async getSms() {
        var telReg =
            /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/
        if (telReg.test(sms.value)) {
            sms.loading = true
            await props.getSms()
            sms.loading = false
            if (res.code === 1) {
                sms.flag = true
                sms.time = 60
                const watting = setInterval(() => {
                    if (sms.time === 0) {
                        clearInterval(watting)
                        sms.flag = false
                        return
                    }
                    --sms.time
                }, 1000)
            }
        } else {
            ElMessage("请输入正确的手机号码")
        }
    },
})
</script>

<style lang="scss" scoped></style>
>
